<template>
	<!-- <div v-if="visible" class="loading_mask">
		<div class="loading_spinner_box">
			<div class="loading_spinner"></div>
		</div>
	</div> -->
	<div v-if="visible" class="load-container">
		<div class="loading_spinner_box">
			<div class="container">
				<div class="boxLoading boxLoading1"></div>
				<div class="boxLoading boxLoading2"></div>
				<div class="boxLoading boxLoading3"></div>
				<div class="boxLoading boxLoading4"></div>
				<div class="boxLoading boxLoading5"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import eventBus from '@/utils/mitt.js';
	let visible = ref(false);
	eventBus.on('a', v => {
		visible.value = v;
	});
</script>

<style scoped lang="scss">
	// .loading_mask {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 0;
	// 	background-color: rgba(0, 0, 0, 0.4);
	// 	z-index: 999;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }
	// .loading_spinner_box {
	// 	box-sizing: border-box;
	// 	padding: 10vh 10vw;
	// 	border-radius: 10px;
	// 	background-color: rgba(94, 92, 92, 0.5);
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }
	// .loading_spinner {
	// 	border: 4px solid #f3f3f3;
	// 	border-radius: 50%;
	// 	border-top: 4px solid #3498db;
	// 	width: 60px;
	// 	height: 60px;
	// 	animation: spin 2s linear infinite;
	// }
	// @keyframes spin {
	// 	0% {
	// 		transform: rotate(0deg);
	// 	}
	// 	100% {
	// 		transform: rotate(360deg);
	// 	}
	// }

	.load-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.2);
		// 高斯模糊
		backdrop-filter: blur(3px);
		z-index: 9999999999;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.loading_spinner_box {
			box-sizing: border-box;
			padding: 10vh 10vw;
			border-radius: 10px;
			background-color: rgba(94, 92, 92, 0.1314);
			display: flex;
			justify-content: center;
			align-items: center;
			.container {
				width: 80px;
				height: 110px;
				// text-align: center;
				// font-size: 10px;
				.boxLoading {
					background-color: #00adb5;
					height: 100%;
					width: 8px;
					margin: 0 4px;
					display: inline-block;
					-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
					animation: stretchdelay 1.2s infinite ease-in-out;
				}
				.boxLoading2 {
					-webkit-animation-delay: -1.1s;
					animation-delay: -1.1s;
				}
				.boxLoading3 {
					-webkit-animation-delay: -1s;
					animation-delay: -1s;
				}
				.boxLoading4 {
					-webkit-animation-delay: -0.9s;
					animation-delay: -0.9s;
				}
				.boxLoading5 {
					-webkit-animation-delay: -0.8s;
					animation-delay: -0.8s;
				}
			}
		}
	}

	@-webkit-keyframes stretchdelay {
		0%,
		40%,
		100% {
			-webkit-transform: scaleY(0.4);
		}
		20% {
			-webkit-transform: scaleY(1);
		}
	}
	@keyframes stretchdelay {
		0%,
		40%,
		100% {
			transform: scaleY(0.4);
			-webkit-transform: scaleY(0.4);
		}
		20% {
			transform: scaleY(1);
			-webkit-transform: scaleY(1);
		}
	}
</style>
